/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Button,
    Image,
    TouchableOpacity,
} from 'react-native';


import { TabNavigator, StackNavigator } from 'react-navigation';

var Order = require('./component/Order/Order');
var Account = require('./component/Account/Account');
var Mine = require('./component/Mine/Mine');
var Login = require('./component/LoginAndRegist/Login');
var RegistScreen = require('./component/LoginAndRegist/Regist');
var User = require('./component/Account/User');


class OrderScreen extends React.Component {
    static  navigationOptions = {
        title: '接单',
        headerTitle: '接单中心',
        // 显示的图片
        tabBarIcon: ({tintColor}) => (
            <Image source={{uri: '个人中心－接单黄'}}
                    style={[{height: 24, width: 24}, {tintColor: tintColor}]}
            />

        ),

    };

  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          { /* other code from before here */ }
            <Order/>
        </View>
    );
  }
}

class AccountScreen extends React.Component {
    static  navigationOptions = {
        title:'账户',
        headerTitle:'账户',
        // 设置导航栏是否显示
        header :null,

        // headerStyle:{backgroundColor:'rgba(0, 0, 0, 0.0)'},

    // 显示的图片
        tabBarIcon: ({tintColor}) => (
            <Image source={{uri: '个人中心－账户黄'}}
                   style={[{height: 24, width: 24}, {tintColor: tintColor}]}
            />

        ),

        headerLeft: (
            <TouchableOpacity onPress={()=> alert('This is a button!')}>
                 <Image source={{uri:'个人中心-评价管理'}} style={{width:32, height:32,marginLeft:10}}></Image>
            </TouchableOpacity>
        ),


        headerRight: (
            <TouchableOpacity onPress={()=> alert('This is a button!')}>
                <Text  style={{fontSize:14,color:"red",marginRight:10}}>资金说明</Text>
            </TouchableOpacity>

        ),

    };
  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center'}}>
          { /* other code from before here */ }
          <Account pushUser = {this.pushUser.bind(this)}/>

        </View>
    );
  }
  
  pushUser(){
      this.props.navigation.navigate("User");
  }
  
}

class MineScreen extends React.Component {
    static  navigationOptions = {
        title:'我的',
        headerTitle:'个人中心',

        // 设置导航栏是否显示
        header:visible = false,

        // 显示的图片
        tabBarIcon: ({tintColor}) => (
            <Image source={{uri: '个人中心－黄'}}
                   style={[{height: 24, width: 24}, {tintColor: tintColor}]}
            />

        ),


    };
  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          { /* other code from before here */ }
         <Mine/>


        </View>
    );
  }
}

class LoginScreen extends React.Component {
    static  navigationOptions = {
        title:'登录'
    };
  render() {
    return (

        <Login/>

    );
  }
}





const OrderStack = StackNavigator({
  Order: { screen: OrderScreen },

});

const AccountStack = StackNavigator({
  Account: { screen: AccountScreen },
   User:{screen:User},
});

const  MineStack = StackNavigator({
  Mine: { screen: MineScreen},
});

const  LoginStack = StackNavigator({
    Login: { screen: Login},
    Regist: { screen: RegistScreen },
});

export default TabNavigator(
    {
      Order: { screen: OrderStack },
      Account: { screen: AccountStack },
      Mine: {screen: MineStack},
      Login: {screen: LoginStack},
    },
    {
      /* Other configuration remains unchanged */
    }
);/**
 * Created by aa on 2018/3/30.
 */



